<template>
  <div class="chart-view">
    <div
      :id="chartContainerId">
    </div>
  </div>
</template>

<script>
  import Echarts from 'echarts'

  export default{
    props: ['width', 'height', 'barChartOption', 'dataOption'],
    data () {
      var data = {}
      data.myChart = {}
      data.chartContainerId = 'chart-view-container-' + new Date().getMilliseconds()
      return data
    },
    events: {
    },
    ready: function () {
      var chartContainer = document.getElementById(this.chartContainerId)
      if (chartContainer) {
        chartContainer.style.height = this.height || '25rem'
        chartContainer.style.width = this.width || '100%'
        this.myChart = Echarts.init(chartContainer)
        this.myChart.setOption(this.dataOption)
      }
    },
    watch: {
      'barChartOption': function (newV, oldV) {
        var chartContainer = document.getElementById(this.chartContainerId)
        if (chartContainer) {
          chartContainer.style.height = this.height || '25rem'
          chartContainer.style.width = this.width || '100%'
          this.myChart = Echarts.init(chartContainer)
          this.myChart.setOption(newV)
        }
      },
      'dataOption': function (newV, oldV) {
        var chartContainer = document.getElementById(this.chartContainerId)
        if (chartContainer) {
          chartContainer.style.height = this.height || '25rem'
          chartContainer.style.width = this.width || '100%'
          this.myChart = Echarts.init(chartContainer)
          this.myChart.setOption(newV)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .chart-view{
    position: relative;
  }
</style>
